// @import "~source/src/_less/base.less";
@black: #4b4353;

@keyframes pageLoadingRotate {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(0.6);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

.rotate-loading(@size, @top: 0, @color: @black, @stroke: ceil(@size / 20)) {
    &::before, &::after {
        content: "\200B";
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        border: @stroke solid;
        box-sizing: border-box;
        border-radius: 100%;
        animation: pageLoadingRotate 1.2s 0s ease-in-out infinite;
    }
    &::before {
        @beforeSize: @size;
        width: @beforeSize;
        height: @beforeSize;
        top: @top;
        border-color: transparent @color;
    }
    &::after {
        @afterSize: ceil(@size / 2 - @stroke / 3 * 2);
        width: @afterSize;
        height: @afterSize;
        top: (@top + ceil((@size - @afterSize) / 2));
        animation-duration: 0.6s;
        border-color: @color transparent;
        animation-direction: reverse;
    }
}

.loading-frame() {
    width: 120px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    padding: 95px 10px 15px;
    font-size: 14px;
    text-align: center;
    color: #fff;
    background-color: rgba(0,0,0,.5);
}

.icon-loading {
    .rotate-loading(18px, 3px, @black);
    display: inline-block;
    position: relative;
    height: 24px;
    width: 24px;
    vertical-align: middle;
}

.page-loading, .el-loading {
    // .rotate-loading;
    .loading-frame;
    .rotate-loading(60px, 20px, #fff);
}

.page-loading {
    position: fixed;
    height: 24px;
    border-radius: 8px;
    z-index: 2000;
}

.el-loading {
    position: relative;
}
